<template>
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="cellStyle"
        @cell-click="cellClick">
        <el-table-column label="序号" width="55" type="index"/>
        
        <el-table-column prop="projectName" label="项目名称"/>
        
        <el-table-column prop="costExpenseName" label="成本费用事项"/>
        
        <el-table-column prop="orgCurrencyName" label="原币币种"/>
        
        <el-table-column prop="exchangeRate" label="汇率"/>
        
        <el-table-column prop="orgCurrencyPrice" label="原币"/>
        
        <el-table-column prop="baseCurrencyPrice" label="本位币"/>
        
        <el-table-column prop="remark" label="备注">
            <template slot-scope="{row}">
                <el-input v-model="row.remark" type="text" placeholder="请输入备注"/>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    name: "costDetailTable",
    data() {
        return {
            tableData: [
                {
                    projectCode: "1",
                    projectName: "2",
                    costExpenseCode: "3",
                    costExpenseName: "4",
                    exchangeRate: "6",
                    orgCurrencyName: "5",
                    orgCurrencyCode: "6",
                    orgCurrencyPrice: "7",
                    
                    baseCurrencyPrice: "8"
                }
            ]
        }
    },
    methods: {
        cellClick(row, column, cell, event) {
            if (column.label === "成本费用事项") {
                console.log(column, 'column');
            }
        },
        cellStyle({columnIndex}) {
            if (columnIndex === 2) return "cursor: pointer";
        }
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-table__row {
    height: 36px;
    line-height: 36px;
}
</style>